﻿@{
    ViewBag.Title = "CheckOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using EC_ASS.Models;

@model IEnumerable<EC_ASS.Models.ShopItem>

@{
    Customer customer = ViewBag.CUST;
}

<div class="container">
    <form action="@Url.Action("CheckOut", "Product")" method="post" class="form-horizontal">
        <div class="row" style="margin-top: 50px;">
            <div class="span5">
                <h4>Điền thôn tin vào phần dưới</h4>
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#buyerInfo" data-toggle="tab">Người đặt mua</a></li>
                    <li><a href="#shipInfo" data-toggle="tab">Thông tin giao hàng</a></li>
                    <li><a href="#paymentInfo" data-toggle="tab">Thanh toán</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="buyerInfo">
                        <div class="control-group">
                            <label class="control-label">Họ và tên</label>
                            <div class="controls">
                                <input value="@customer.Name" type="text" name="buyer" required data-validation-required-message="Vui lòng nhập thông tin"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Địa chỉ</label>
                            <div class="controls">
                                <input value="@customer.Address" name="address" type="text" required data-validation-required-message="Vui lòng nhập thông tin"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Điện thoại</label>
                            <div class="controls">
                                <input name="buyerPhone" type="text" placeholder="VD: 01889135342" maxlength="11"
                                    pattern="^[0-9]+$" data-validation-pattern-message="Sai định dạng" value="@customer.Phone"
                                    required data-validation-required-message="Vui lòng nhập thông tin"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Email</label>
                            <div class="controls">
                                <input name="buyerEmail" type="email" placeholder="VD: locmx@gmail.com" required
                                   value="@customer.Email" data-validation-email-message="Địa chỉ email không chính xác" />
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="shipInfo">
                        <div class="control-group">
                            <label class="control-label">Người nhận</label>
                            <div class="controls">
                                <input value="@customer.Name" type="text" name="receiver" required data-validation-required-message="Vui lòng nhập thông tin" />
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <label class="radio">
                                    <input type="radio" name="shipOption" id="shipOptionHCM" value="0" checked>
                                    Nội thành HCM                                  
                                </label>
                                <div id="option1" style="margin-top: 10px; margin-bottom: 10px;">
                                    <select name="shipAddress" id="shipAddressHCM" style="margin-bottom: 10px;">
                                        <option value="0">Chọn quận/huyện ship</option>
                                        <option value="1">Quận 1</option>
                                        <option value="2">Quận 3</option>
                                        <option value="3">Quận 5</option>
                                        <option value="4">Quận 7</option>
                                        <option value="5">Quận 9</option>
                                        <option value="6">Quận 10</option>
                                        <option value="7">Quận 12</option>
                                        <option value="8">Quận Tân Bình</option>
                                        <option value="9">Quận Bình Tân</option>
                                        <option value="10">Quận Tân Phú</option>
                                        <option value="11">Quận Thủ Đức</option>
                                        <option value="12">Quận Bình Chánh</option>
                                    </select>
                                    <input type="text" value="" name="shipFeeHCM" id="shipFeeHCM" placeholder="Phí ship" readonly="readonly" />
                                    <input style="margin-top: 10px;" type="text" value="" name="homeAddress" id="homeAddress" placeholder="Địa chỉ nhà" required/>
                                </div>
                                <label class="radio">
                                    <input type="radio" name="shipOption" id="shipOptionOther" value="1" />
                                    Các tỉnh khác
                                </label>
                                <div id="option2" style="display: none; margin-top: 10px; margin-bottom: 10px;">
                                    <input type="text" value="" name="shipAreaOther" id="shipAreaOther" placeholder="Địa chỉ nhận hàng" />
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Điện thoại</label>
                            <div class="controls">
                                <input name="shipContactPhone" type="text" placeholder="VD: 01889135342" maxlength="11"
                                    pattern="^[0-9]+$" data-validation-pattern-message="Sai định dạng" value="@customer.Phone"
                                    required data-validation-required-message="Vui lòng nhập thông tin" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Email</label>
                            <div class="controls">
                                <input name="shipContactEmail" type="email" placeholder="VD: locmx@gmail.com" required
                                  value="@customer.Email"  data-validation-email-message="Địa chỉ email không chính xác" />
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="paymentInfo">
                        <div class="span5 row">
                            <label class="radio inline">
                                <input type="radio" name="payment" id="optionsRadios1" value="nganluong">
                                <img class="mobile-max-width small" src="@Url.Content("~/img/payment/8.gif")" title="Thanh toán qua NganLuong.Vn">
                            </label>
                            <label class="radio inline">
                                <input type="radio" name="payment" id="optionsRadios2" value="onepay">
                                <img class="mobile-max-width small" src="@Url.Content("~/img/payment/2.gif")" title="Thanh toán qua OnePay">
                            </label>
                        </div>
                        <div class="span5 row">
                            <label class="radio inline">
                                <input type="radio" name="payment" id="optionsRadios3" value="ATM">
                                <img class="mobile-max-width small" src="@Url.Content("~/img/payment/9.gif")" title="Thanh toán qua ATM">
                            </label>
                            <label class="radio inline">
                                <input type="radio" name="payment" id="optionsRadios4" value="home">
                                <img class="mobile-max-width small" src="@Url.Content("~/img/payment/10.gif")" title="Thanh toán sao khi nhận hàng">
                            </label>
                        </div>
                    </div>
                </div>

            </div>
            <div class="span7">
                <h4 class="span7">Thông tin giỏ hàng</h4>
                <div class="span7 row" id="cartTable">
                    <table class="table table-striped">
                        <thead>
                            <th>Hình ảnh</th>
                            <th>Tên sản phẩm</th>
                            <th>Giá (VAT)</th>
                            <th>Số lượng</th>
                            <th>Size</th>
                            <th>Thành tiền</th>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {
                                <tr>
                                    <td>
                                        <img src="@Url.Content("~/" + item.cPicture)" height="70" width="70"/></td>
                                    <td>@item.cName</td>
                                    <td>@item.cPrice</td>
                                    <td>@item.cQuantity</td>
                                    <td>@item.cSize</td>
                                    <td>@(item.cQuantity * item.cPrice) VNĐ</td>
                                </tr>
                            }
                            <tr>
                                <td colspan="4"></td>
                                <td><span class="label label-info">Total</span></td>
                                <td>@ViewBag.Total VNĐ</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="span7 row">
                    <h5>Ghi chú đơn hàng</h5>
                    <textarea name="Note" rows="4" class="span7"></textarea>
                    <button style="float: right;" type="submit" class="btn"><i class="icon-ok">Đặt hàng</i></button>
                    <a style="float: left;" href="/Home/Index" class="btn"><i class="icon-refresh">Tiếp tục mua hàng</i></a>
                </div>
            </div>
        </div>
    </form>
</div>
<hr class="tall" />
<div class="container">
    <h4>Thanh toán</h4>
    <div class="row">
        @Html.Partial("_Payment")
    </div>
</div>
<script>
    $(document).ready(function () {
        $(":radio:eq(1)").click(function () {
            $("#option2").show(1000);
            $("#option1").hide(1000);
            document.getElementById("shipFeeHCM").value = "";
            $("#shipAddressHCM").val("0");
        });
        $(":radio:eq(0)").click(function () {
            $("#option1").show(1000);
            $("#option2").hide(1000);
            document.getElementById("shipAreaOther").value = "";
        });

        // Fill value
        if (document.getElementById("shipOptionHCM").checked == true) {
            $('#shipAddressHCM').on('change', function () {
                if ($(this).val() == "1") {
                    document.getElementById("shipFeeHCM").value = "10000";
                }
                if ($(this).val() == "2") {
                    document.getElementById("shipFeeHCM").value = "15000";
                }
                if ($(this).val() == "3") {
                    document.getElementById("shipFeeHCM").value = "20000";
                }
                if ($(this).val() == "4") {
                    document.getElementById("shipFeeHCM").value = "20000";
                }
                if ($(this).val() == "5") {
                    document.getElementById("shipFeeHCM").value = "15000";
                }
                if ($(this).val() == "6") {
                    document.getElementById("shipFeeHCM").value = "25000";
                }
                if ($(this).val() == "7") {
                    document.getElementById("shipFeeHCM").value = "10000";
                }
                if ($(this).val() == "8") {
                    document.getElementById("shipFeeHCM").value = "20000";
                }
                if ($(this).val() == "9") {
                    document.getElementById("shipFeeHCM").value = "30000";
                }
                if ($(this).val() == "10") {
                    document.getElementById("shipFeeHCM").value = "15000";
                }
                if ($(this).val() == "11") {
                    document.getElementById("shipFeeHCM").value = "15000";
                }
                if ($(this).val() == "12") {
                    document.getElementById("shipFeeHCM").value = "25000";
                }
            });
        }
    });
</script>
